.block{
	color:#fff;
	font-size: 14px;
	&.open{
		.block-container{
			.header{
				background:#666;
				.arrow :global(.fa){
					transform: rotate(90deg);
				}
			}
			.content{
				display: block;
			}
		}
	}
	&.active{
		.block-icon{
			background:#666;
		}
		.block-container{
			display: block;
			position: absolute;
			left:50px;
			margin-top: -50px;
			min-width: 256px;
			background:#555;
			.content{
				min-height: 150px;
				.block-content-list{
					.list-item{
						
						&:hover{
							background:#666;
						}
					}
				}
			}
		}
	}
	&.sidebarOpen{
		.block-container{
			display: block;
		}
		.block-icon{
			display: none;
		}
	}
	.block-icon{
		width: 50px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		cursor: pointer;
		border-radius:50% 0 0 50%;
		&:hover{
			background:#666;
		}
	}
	.block-container{
		display: none;
		.header{
			height: 50px;
			line-height: 50px;
			cursor: pointer;
			&:hover{
				background:#666;
			}
			.arrow{
				width: 30px;
				display: inline-block;
				text-align: center;
				:global(.fa){
					transition: transform 300ms;
				}
			}
			h4{
				display: inline-block;
			}
		}
		.content{
			display: none;
			.block-content-list{
				padding:0px 0px 10px;
				line-height: 35px;
				.list-item{
					.item-icon{
						width: 30px;
						height: 30px;
						display: inline-block;
						text-align: center;
					}
					a{
						display: inline-block;
						text-decoration: none;
						color:#fff;
						width: calc(100% - 30px);
					}
					&:hover{
						background:#666;
					}
				}
			}
		}
	}
}
